<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<!-- 头碎片-->
<head th:replace="fragment/Headfragment::Headfragment">
    <link rel="stylesheet" href="css/main.css"/>


</head>
<body>
<div class="container-scroller">
    <!-- 页面头部碎片 -->
    <nav th:replace="fragment/PageHeadfragmeng::PageHeadfragment"></nav>
    <!-- partial -->
    <div class="container-fluid page-body-wrapper">
        <!-- 侧边栏页面 -->
        <nav th:replace="fragment/PageSidebarfragment::PageSidebarfragment"></nav>
        <!-- partial -->
        <div class="main-panel">
            <div class="content-wrapper">
                <div class="page-header">
                    <h3 class="page-title">
              <span class="page-title-icon bg-gradient-primary text-white mr-2">
                <i class="mdi mdi-home"></i>
              </span>聊天室
                    </h3>
                    <nav aria-label="breadcrumb">
                        <ul class="breadcrumb">
                            <li class="breadcrumb-item active" aria-current="page">
                                <span></span>
                                <i class="mdi mdi-alert-circle-outline icon-sm text-primary align-middle"></i>
                            </li>
                        </ul>
                    </nav>
                </div>
                <button type="button" class="btn btn-gradient-primary btn-rounded btn-fw" id="chat">连接</button>
                <div id="11" class="hidden"></div>
                <div id="chat-page">
                    <div class="chat-container">
                        <div id="area">
                            <ul id="messageArea">
                            </ul>
                        </div>
                        <form id="messageForm" name="messageForm">
                            <div class="form-group">
                                <div class="input-group clearfix">
                                    <input type="text" id="message" placeholder="Type a message..." autocomplete="off"
                                           class="form-control"/>
                                    <button type="submit" class="btn btn-gradient-primary btn-rounded btn-fw">发送</button>

                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div> <!-- main-panel ends -->
        </div>
        <!-- page-body-wrapper ends -->
    </div>
</div>
<!-- container-scroller -->
<!-- plugins:js -->
<script src="vendors/js/vendor.bundle.base.js"></script>
<script src="vendors/js/vendor.bundle.addons.js"></script>
<!-- endinject -->
<!-- Plugin js for this page-->
<!-- End plugin js for this page-->
<!-- inject:js -->
<script src="js/off-canvas.js"></script>
<script src="js/misc.js"></script>
<!-- endinject -->
<!-- Custom js for this page-->
<script src="js/dashboard.js"></script>
<!-- End custom js for this page-->

<script src="https://cdn.bootcss.com/sockjs-client/1.1.4/sockjs.min.js"></script>
<script src="https://cdn.bootcss.com/stomp.js/2.3.3/stomp.min.js"></script>
<script src="/js/main.js"></script>

<script th:inline="javascript">
    'use strict';


    var chatPage = document.querySelector('#chat-page');
    var chat = document.querySelector('#chat');
    var messageForm = document.querySelector('#messageForm');
    var messageInput = document.querySelector('#message');
    var messageArea = document.querySelector('#messageArea');

    var stompClient = null;
    var username = [[${session.cs.realname}]];


    function connect(event) {

        if (username) {
            var socket = new SockJS('/ws');
            stompClient = Stomp.over(socket);

            stompClient.connect({}, onConnected, onError);
        }
        event.preventDefault();
    }


    function onConnected() {
        // Subscribe to the Public Topic
        alert("连接成功");
        stompClient.subscribe('/topic/public', onMessageReceived);

        // Tell your username to the server
        stompClient.send("/chat2.addUser", {}, JSON.stringify({sender: username, type: 'JOIN'}));



    }

    function onError(error) {
        connectingElement.textContent = 'Could not connect to WebSocket server. Please refresh this page to try again!';
        connectingElement.style.color = 'red';


    }


    function sendMessage(event) {
        var messageContent = messageInput.value.trim();
        if (messageContent && stompClient) {
            var chatMessage = {
                sender: username,
                content: messageInput.value,

            };
            stompClient.send("/app/chat2.sendMessage", {}, JSON.stringify(chatMessage));
            messageInput.value = '';
        }
        event.preventDefault();
    }


    function onMessageReceived(payload) {
        var message = JSON.parse(payload.body);

        var messageElement = document.createElement('li');

        if (message.type === 'JOIN') {
            messageElement.classList.add('event-message');
            message.content = message.sender + ' joined!';
        } else if (message.type === 'LEAVE') {
            messageElement.classList.add('event-message');
            message.content = message.sender + ' left!';
        } else {
            messageElement.classList.add('chat-message');

            var usernameElement = document.createElement('span');
            var usernameText = document.createTextNode(message.sender);
            usernameElement.appendChild(usernameText);
            messageElement.appendChild(usernameElement);
        }

        var textElement = document.createElement('p');
        var messageText = document.createTextNode(message.content);
        textElement.appendChild(messageText);

        messageElement.appendChild(textElement);

        messageArea.appendChild(messageElement);
        messageArea.scrollTop = messageArea.scrollHeight;

    }

    chat.addEventListener('click', connect, true);
    messageForm.addEventListener('submit', sendMessage, true)

</script>


</body>

</html>
